<template>
 <div class="app">
<!-- App下载 -->
    <el-container>
        <el-main class="main">
          <div class="banner">
              <!-- 左边 -->
            <div class="left">
              <!-- 手机部分和二维码 -->
              <div class="preview">
                <!-- 手机 -->
                <div class="imgs">
                  <!-- 轮播图 -->
                  <el-carousel height="302px" indicator-position="none" arrow="never" class="block">
                      <el-carousel-item v-for="item in pics" :key="item"> 
                        <!-- <img src="" alt=""> -->
                        <img :src="item">
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                  <!-- 二维码 -->
                <div class="code">
                  <img :src="require('@/assets/dowload.png')" width="150" height="150">
                </div>
                <div class="text">二维码扫描下载</div>
              </div>
            </div>
            <!-- 右边 -->
            <div class="right">
              <!-- 下载按钮 -->
                <ul class="op">
                  <li><a  class="iphone" href="https://huazizhanye.oss-cn-beijing.aliyuncs.com/tratel.ipa"></a></li>
                  <li><a  class="hd" href="https://huazizhanye.oss-cn-beijing.aliyuncs.com/tratel.ipa"></a></li>
                  <li><a  class="and" href="https://huazizhanye.oss-cn-beijing.aliyuncs.com/tratel.apk"></a></li>
                </ul>
              <!-- 底部文字 -->
              <div class="btm-text">
                <h1>汇集全球旅游攻略，1.3亿用户信赖，旅行必备</h1>
                <ul>
                  <li v-for="item in lists" :key="item">{{item}}</li>
                </ul>
              </div>
            </div>
          </div>
        </el-main>
    </el-container>
  <!-- footer -->
   <footers></footers>
</div>
</template>

<script>
import footers from '../commonality/Footer.vue'
export default {
    name: 'WorkspaceJsonload',

    data() {
        return {
            pics:[
              "https://b1-q.mafengwo.net/s15/M00/54/30/CoUBGV4e3xWAKMAKAAEh9BEzSL049.jpeg",
              "https://p1-q.mafengwo.net/s15/M00/53/E8/CoUBGV4e3u6AEsxVAAE2lLzWvSk48.jpeg",
              "https://n1-q.mafengwo.net/s15/M00/54/52/CoUBGV4e3yiAHT3dAAEiQbl1VLA88.jpeg",
              "https://b1-q.mafengwo.net/s15/M00/54/77/CoUBGV4e3zuAMIFDAAEtM1v9b5s48.jpeg",
              "https://p1-q.mafengwo.net/s15/M00/54/95/CoUBGV4e31KACdNHAAEI9vhkIIg69.jpeg"
            ],
            lists:[
              "旅游攻略：目的地攻略、酒店攻略、自由行攻略，靠谱实用",
              "游记点评：用户亲身旅行经历，吃住游购值得参考",
              "超值特卖：机票+酒店、当地游、门票、签证、保险等一应俱全，省钱省心",
              "旅行途中随时查询周边吃住玩乐；嗡嗡分享，留存记忆",
              "荣誉：AppStore精品旅行App；腾讯应用宝星App入围应用"
            ]
        };
    },

    mounted() {
        window.scrollTo(0,0)
    },

    methods: {
        
    },
    components:{
       footers
    },
};
</script>

<style lang="scss" scoped>

  .main{
      width: 100%;
    .banner{
        width: 850px;
        margin:0 auto;
        padding-top:85px;
        box-sizing: border-box;
      .left{
          width: 800px;
          height: 407px;
          background-image: url(https://css.mafengwo.net/images/app/m/bn_bg2.gif);
          border-radius: 10px;
          position: relative;
          .preview{
            width: 220px;
            height: 630px;
            position: absolute;
            top:85px;
            left:30px;
            .imgs{
             width: 170px;
             height: 302px;
             background-image: url(https://css.mafengwo.net/images/app/m/app_n_sprite5.gif);
             padding: 63px 17px 59px 17px;
             margin-bottom: 12px;
            }
            .code{
              height: 150px;
              padding-left:26px;
              margin-bottom:8px;
            }
            .text{
              font-size: 15px;
              color: #666;
              line-height: 24px;
              padding-left:51px;
            }

          }
      }
      .right{
        width:500px;
        height: 276px;
        margin-left:300px;
        margin-top: 30px;
        .op{
          height:63px;
          list-style: none;
          display: flex;
          justify-content: space-between;
          li{
            width: 124px;
            height: 42px;
            a{
              display: inline-block;
              text-decoration: none;
              width: 124px;
              height: 42px;
              background-image: url(https://css.mafengwo.net/images/app/m/app_n_sprite5.gif);
            }
            .iphone{
              background-position-x:-225px;
            }
            .hd{
              background-position-x:-383px;
            }
            .and{
              background-position-x:-544px;
            }
          }

        }
        .btm-text{
          color: #666;
          h1{
            font-size: 22px;
            margin-bottom: 20px;
          }
          ul{
            height: 140px;
            list-style: none;
            font-size:14px;
            li{
              height: 28px;
              line-height: 28px;
              font-size:14px;
            }
             li::before{
               content: '-';
             }
          }
        }
      }
    }
  }

</style>